﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>comment</title>
    <style type="text/css">
        html
        {
            background-color: #2E2E2E;
        }
        .offscreen
        {
            font-family: 'Cascadia Mono';
            font-size: 16px;
            font-weight: 300;
            margin: 0px, 0px, 0px, 0px;
            padding: 0px, 0px, 0px, 0px;
            position: absolute;
            top: -100px;
        }
        .container1
        {
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        textarea
        {
            background-color: #1e1e1e;
            border: none;
            caret-color: #e6e6e6;
            color: #57A64A;
            font-family: 'Cascadia Mono';
            font-weight: 300;
            height: 200px;
            margin: 0px, 0px, 0px, 0px;
            outline: none;
            overflow-y: hidden;
            padding: 0px, 0px, 0px, 0px;
            resize: none;
            white-space: break-spaces;
            width: 700px;
        }
        textarea:focus
        {
            outline-color: #444444;
        }
        textarea::selection
        {
            background-color: #264F78;
        }
        .container2
        {
            align-items: center;
            background-color: #4D4D4D;
            display: inline-flex;
            float: left;
            height: 50px;
            justify-content: center;
            width: 500px;
        }
        .fontNameLabel
        {
            color: #e5e5e5;
            font-size: 18px;
            padding-left: 15px;
            padding-right: 15px;
            user-select: none;
        }
        .fontNameInput
        {
            background-color: #1e1e1e;
            border: none;
            caret-color: #e6e6e6;
            color: #e5e5e5;
            font-family: 'Segoe UI';
            font-size: 18px;
            height: 30px;
            margin-right: 8px;
            outline: none;
            width: 220px;
        }
        .columnCountLabel
        {
            color: #e5e5e5;
            font-size: 18px;
            padding-left: 8px;
            padding-right: 15px;
            user-select: none;
        }
        .columnCountInput
        {
            background-color: #1e1e1e;
            border: none;
            caret-color: #e6e6e6;
            color: #e5e5e5;
            font-family: 'Segoe UI';
            font-size: 18px;
            height: 30px;
            margin-right: 10px;
            outline: none;
            width: 80px;
        }
        .convertButton
        {
            background-color: #7160e8;
            border: none;
            color: #e5e5e5;
            font-family: 'Segoe UI';
            font-size: 20px;
            font-weight: 500;
            height: 50px;
            transition: 0.2s all;
            width: 200px;
        }
        .convertButton:hover
        {
            background-color: #7565ed;
        }
        .convertButton:active
        {
            background-color: #6456dc;
            color: #cccccc;
        }
    </style>
</head>
<body>
    <span id="monospaced_sample" class="offscreen"></span>
    <div class="container1">
        <textarea id="comment_text_area">Enter raw comment here...</textarea>
        <br />
        <div class="container2">
            <label class="fontNameLabel">Font</label>
            <input id="font_name_input" class="fontNameInput" type="text"
                   value="Cascadia Mono" onchange="UpdateFontType(this.value);">
            <label class="columnCountLabel">Column</label>
            <input id="column_count_input" class="columnCountInput" type="number"
                   value="75" onchange="UpdateFontSize(parseInt(this.value, 10));">
        </div>
        <button class="convertButton" onclick="ConvertComment();">Convert Comment</button>
    </div>
    <script type="text/javascript">
        window.onload = function ()
        {
            var monoSample = document.getElementById('monospaced_sample');
            var commentArea = document.getElementById('comment_text_area');
            var colCountInput = document.getElementById('column_count_input');

            commentArea.onwheel = function scrollComment(event)
            {
                event.preventDefault();
                // font-px-size / mono-char-height == constant
                var lineHieght = monoSample.clientHeight * parseFloat(commentArea.style.fontSize) / 16;
                var wheelDelta = Math.sign(event.deltaY) * lineHieght;
                var bottomMost = commentArea.scrollHeight - commentArea.clientHeight;
                commentArea.scrollTop = Math.min(bottomMost, Math.max(0, commentArea.scrollTop + wheelDelta));
            };
            // Used to calculate the average width of the monospaced font.
            monoSample.textContent = 'x'.repeat(10000);
            UpdateFontSize(parseInt(colCountInput.value, 10));
        };
        function UpdateFontType(fontName)
        {
            var monoSample = document.getElementById('monospaced_sample');
            var commentArea = document.getElementById('comment_text_area');
            var colCountInput = document.getElementById('column_count_input');

            monoSample.style.fontFamily = fontName;
            commentArea.style.fontFamily = fontName;
            UpdateFontSize(parseInt(colCountInput.value, 10));
        }
        function UpdateFontSize(columnCount)
        {
            var monoSample = document.getElementById('monospaced_sample');
            var commentArea = document.getElementById('comment_text_area');

            var charWidth = monoSample.clientWidth / 10000;
            var areaWidth = commentArea.clientWidth;
            // font-px-size / mono-char-width == constant
            // Add 0.5 to fix the floating arithmetic error.
            var fontPxSize = (16 / charWidth) * (areaWidth / (columnCount + 0.5));
            commentArea.style.fontSize = fontPxSize.toString() + 'px';
        }
        // 1. Convert all pseudo-wraps to new-line characters.
        // 2. Insert a double-slash at the beginning of each line.
        function ConvertComment()
        {
            var commentArea = document.getElementById('comment_text_area');

            // Keep the content in single line to help us test breaks.
            commentArea.style.whiteSpace = 'nowrap';

            var strRaw = commentArea.value;
            var aeraWidth = commentArea.clientWidth;

            function testBreak(strTest)
            {
                commentArea.value = strTest;
                return commentArea.scrollWidth > aeraWidth;
            }
            function findNextBreakLength(strSource, nLeft, nRight)
            {
                var nCurrent;
                if (typeof(nLeft) == 'undefined')
                {
                    nLeft = 0;
                    nRight = -1;
                    // The binary search step can be changed dynamically according to
                    // the approximate length of the candidate source string.
                    nCurrent = 64;
                }
                else // decide next span to test
                {
                    if (nRight == -1)
                    {
                        nCurrent = nLeft * 2;
                    }
                    else if (nRight - nLeft <= 1)
                    {
                        return Math.max(2, nRight);
                    }
                    else nCurrent = nLeft + (nRight - nLeft) / 2;
                }
                if (testBreak(strSource.substr(0, nCurrent)))
                {
                    nRight = nCurrent;
                }
                else // break is in the right range
                {
                    if (nCurrent >= strSource.length)
                    {
                        return null;
                    }
                    nLeft = nCurrent;
                }
                return findNextBreakLength(strSource, nLeft, nRight);
            }

            var i = 0, j;
            var strNewValue = '// ';
            while (i < strRaw.length)
            {
                var breakOffset = findNextBreakLength(strRaw.substr(i));
                if (breakOffset === null)
                {
                    strNewValue += strRaw.substr(i);
                    break;
                }
                var nLineLength = breakOffset - 1;
                // We do not want to break a complete word,
                // so break at the nearest space on the left.
                for (j = nLineLength - 1; j >= 0; --j)
                {
                    if (strRaw.substr(i + j, 1) == ' ')
                    {
                        nLineLength = j + 1;
                        break;
                    }
                }
                strNewValue += strRaw.substr(i, nLineLength) + '\n';
                i += nLineLength;
            }
            commentArea.style.whiteSpace = 'break-spaces';
            commentArea.value = strNewValue.replaceAll(/ *\n/g, '\n// ');
        }
    </script>
</body>
</html>
